.tabBar {
  position: relative;
  overflow-x: hidden;
  display: flex;
  align-content: stretch;
  user-select: none;
  -webkit-app-region: drag;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  user-select: none;
  overflow: hidden;
  background-color: var(--bg-tab);
  color: var(--fg-tab);
  fill: var(--fg-tab);

  &:hover {
    background-color: var(--bg-tab-hover);
    color: var(--fg-tab-hover);
    fill: var(--fg-tab-hover);
    cursor: default;
  }

  &:hover .tab__close{
    opacity: 0.4;
  }

  &__text {
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: clip;
    font-size: var(--fontControlSize);
    margin-right: 6px;
    opacity: 0.4;
    -webkit-app-region: no-drag;
  }

  &:hover .tab__text {
    opacity: 1;
  }

  &__close {
    height: 14px;
    color: var(--fg-tab);
    fill: var(--fg-tab);
    opacity: 0;
    display: inline-flex;
    -webkit-app-region: no-drag;

    &:hover {
      color: var(--fg-tab-hover);
      fill: var(--fg-tab-hover);
      cursor: default;
      opacity: 1 !important;
    }
  }

  &_active {
    background-color: var(--bg-tab-active);
    color: var(--fg-tab-active);
    fill: var(--fg-tab-active);
    opacity: 1;

    .tab__text {
      opacity: 1;
    }

    .tab__close {
      opacity: 0.16;
    }


  }

  &_main_active {
    background-color: var(--bg-panel);

    .icon {
      color: var(--bg-panel);
      filter: invert(1)
    }

    &:hover {
      cursor: default;
      background-color: var(--bg-panel);

      .icon {
        color: var(--bg-panel);
        filter: invert(1)
      }
    }
  }
}
